<template>
    <div id="car" >      
        <table border="0px">
            <tr>
                <td>
                   <p class="img1"  @click="btn()" v-if="total==0"></p>
                   <p class="img2"  @click="btn()" v-if="total>0"></p>
                </td>
            </tr>
             <tr id="top1" v-if="total==0" v-show="isShow">
                <td></td>
            </tr>
            <!-- <tr id="top2" v-if="total>0" v-show="isShow">
                <td>
                    
                </td>
                <td @click="Clean">
                    <span><i></i>清空购物车</span>
                </td>
            </tr> -->
            <tr  v-show="isShow" id="tr2">
                <td id="td2">
                    <tr v-for="goods in cars[shopid]" :key="goods.id" id="carsBox">
                        <td id="goodsImg">
                            <img :src="imgURL+goods.thumb" alt="">
                        </td>
                        <td id="texts">
                            <p>{{goods.title}}</p>
                            <span>￥{{goods.sprice}}</span>
                            <span>￥{{goods.price}}</span>
                        </td>
                        <td id="btns">
                            <button @click="jian(goods)" id="btn1">-</button>
                            <span>{{goods.num}}</span>
                            <button @click="add(goods)" id="btn2">+</button>
                        </td>
                    </tr>
                </td>
            </tr>
            <tr id="money">
                <td colspan="2">
                    <h2 id="h21" v-if="total==0">购物车是空的</h2> 
                    <h2 id="h22" v-if="total>0">￥{{total}}</h2> 
                    <span id="span1" v-if="total==0">去结算</span>
                    <span id="span2" v-if="total>0">去结算</span>                                   
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
    // cars={
    //     shopid:{
    //         goodsid:{}
    //     }
    // }
    export default {
       props:['shopid','active'],
       data(){
          return{
                isShow:false,
                men:'',
          }
       },
       computed:{
           total(){
               const goods=this.cars[this.shopid];
               //console.log(Object.keys(goods))
               var total=0;
               for(let key in goods){
                    // console.log(goods[key])
                    let tmp=goods[key].sprice*goods[key].num
                    // console.log(tmp)
                   total+=tmp
               }
               return total
           }
       },
       methods:{
           Clean(){

           },
           btn(){
                this.isShow = !this.isShow;                
           },
           add(goods){
               if(goods.num<goods.stotes){
                   goods.num++
               }
           },
           jian(goods){
               goods.num--;
               if(goods.num==0){
                   this.$delete(this.cars[this.shopid],goods.id)
               }
           }
       }
    }
</script>
<style scoped lang="scss">
    *{
        margin:0;
        padding:0;
        list-style-type:none;
        text-decoration:none;
    } 

    #car table{
        position: fixed;
        z-index: 1000;
        bottom:0;
        left:0;
        width:100%;
        height:100px;
        background-color:#fff;
        // overflow-y: scroll;
    }
    
    #car{ 
        position: relative;

        .img1{
            display:block;
            width:110px;
            height:110px;
            background-repeat:no-repeat;           
            background-size:100px 250px;            
            background-image:url(../image/store/cart.png);
            border:none;
            outline:0;
            position:absolute;
            top:-70px;
            left:20px;
        }
        .img2{
            display:block;
            width:110px;
            height:110px;
            background-repeat:no-repeat;           
            background-size:100px 250px;            
            background-image:url(../image/store/cart.png);
            background-position:0 -140px;
            border:none;
            outline:0;
            position:absolute;
            top:-100px;
            left:20px;
        }
         #top1{
            height:72px;
            width:750px;
            display:none;
            border:1px solid red;
        }
        #top2{
            height:72px;
            width:750px;
            display:block;
            border:1px solid red;

            span{
                display:inline-block;
                width:180px;
                height:70px;
                padding-right:24px;
                border:1px solid red;
                line-height: 70px;
                font-size:24px;
                color: #999;
                
                i{
                    display:inline-block;
                    width:30px;
                    height:30px;
                    background-image: url(../image/store/delete.png);
                    background-repeat: no-repeat;
                    background-size:100% 100%;
                    position: relative;
                    top:5px;
                }
            }
        }

        #td2{
            width:750px;      
            max-height:200px;
            overflow-y: auto;

            #carsBox{
                display:flex;
                justify-content:space-around;
                
                td{
                    height:136px;
                    padding:10px;
                }
                //图片
                #goodsImg{              
                    width:100px;
                    height:100px;

                    img{
                        display:inline-block;
                        width:100px;
                        height:100px;
                    }
                }
                //文字信息
                #texts{
                    border:none;
                    position: relative;
                    left:-50px;
                    width:310px;
                    p{
                        font-size:28px;
                        padding:10px;
                    }

                    span:nth-of-type(1){
                        color:red;
                        font-size:28px;
                    }
                    span:nth-of-type(2){
                        font-size:28px;
                        color:#999;
                        text-decoration: line-through;
                    }
                }

                //按钮
                #btns{
                    display:flex;
                    position: relative;
                    left:-55px;
                    border:none;
                    margin-top:10px;

                    #btn1{
                        color:rgba(0,203,30,1);
                        background-color:#fff;
                        border:1px solid rgba(0,203,30,1);
                    }
                    span{
                        width:60px;
                        height:56px;
                        line-height:56px;
                        display:block;
                        text-align: center;
                        margin:0;
                        font-size:32px;
                    }
                    button{
                        display:block;
                        width:56px;
                        height:56px;
                        border-radius:50px;
                        font-size:50px;
                        border:0;
                        outline:none;
                        line-height:0px;
                    }
                    #btn2{
                        color:#fff;
                        background-color:rgba(0,203,30,1);
                        position:absolute;
                        left:120px;
                    }
                }
            }
        }
        #money{
            width:750px;
            height:100px;

            td{
                display:flex;
                width:750px;
                height:100px;

                #h21{
                    width:500px;
                    height:100px;
                    line-height:100px;
                    color:#999;
                    font-size:28px;
                    font-weight: normal;
                    margin-left:30px;
                }
                #h22{
                    width:510px;
                    height:100px;
                    line-height:100px;
                    color:#ff3434;
                    margin-left:20px;
                }
                #span1{
                    display:block;
                    width:220px;
                    height:100px;
                    font-size:32px;
                    font-weight: bold;
                    text-align:center;
                    line-height: 100px;
                    background-color:rgba(170,170,170,1);
                    color:#fff;
                }
                #span2{
                    display:block;
                    width:220px;
                    height:100px;
                    font-size:32px;
                    font-weight: bold;
                    text-align:center;
                    line-height: 100px;
                    background-color:rgba(0,203,30,1);
                    color:#fff;
                }
            }
        }
    }
</style>